<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>NiiVue</title>
    <link rel="stylesheet" href="niivue.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="fiberOcclusion">Occlusion</label>
      <input
        type="range"
        min="0"
        max="100"
        value="0"
        class="slider"
        id="fiberOcclusion"
      />
      <label for="fiberRadius">Radius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="5"
        class="slider"
        id="fiberRadius"
      />
      <label for="fiberDitherSlider">Dither</label>
      <input
        type="range"
        min="0"
        max="10"
        value="0"
        class="slider"
        id="fiberDitherSlider"
      />
      <label for="fiberColor">Fiber color</label>
      <select id="fiberColor">
        <option value="Global" selected>Global direction</option>
        <option value="Local">Local direction</option>
        <option value="Fixed">Fixed</option>
      </select>
      <label for="xRaySlider">XRay</label>
      <input
        type="range"
        min="0"
        max="5"
        value="0"
        class="slider"
        id="xRaySlider"
      />
      <button id="about">About</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="shaders">Shaders: </label>
    </footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      fiberRadius.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", this.value * 0.1)
        nv1.updateGLVolume()
      }
      fiberColor.onchange = function () {
        nv1.setMeshProperty(nv1.meshes[0].id, "fiberColor", this.value)
      }
      fiberOcclusion.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[0].id, "fiberOcclusion", this.value * 0.01)
        nv1.updateGLVolume()
      }
      fiberDitherSlider.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[0].id, "fiberDither", this.value * 0.1)
      }
      xRaySlider.oninput = function () {
        nv1.opts.meshXRay = this.value / 20
        nv1.drawScene()
      }
      about.onclick = function () {
        window.alert("View streamlines in DSI-Studio TinyTrack format")
      }
      var volumeList1 = [{ url: "../images/mni152.nii.gz"}]
      let defaults = {
        backColor: [0, 0, 0, 1],
        show3Dcrosshair: true,
      }
      var nv1 = new niivue.Niivue(defaults)
      await nv1.attachToCanvas(gl1)
      nv1.opts.dragMode = nv1.dragModes.pan
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.opts.yoke3Dto2DZoom = true
      await nv1.loadVolumes(volumeList1)
      await nv1.loadMeshes([{ url: "../images/TR_S_R.tt.gz"}])
      nv1.setMeshProperty(nv1.meshes[0].id, "fiberDither", 0)
      nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", 0.5)
      nv1.setMeshProperty(nv1.meshes[0].id, "rgba255", [0, 255, 255, 255]); //color for fixed
      nv1.setMeshShader(nv1.meshes[0].id, "diffuse")
      nv1.setClipPlane([0.05, 0, 90])
      let cmaps = nv1.meshShaderNames()
      let cmapEl = document.getElementById("shaders")
      for (let i = 0; i < cmaps.length; i++) {
        let btn = document.createElement("button")
        btn.innerHTML = cmaps[i]
        btn.onclick = function () {
          nv1.setMeshShader(nv1.meshes[0].id, cmaps[i])
        }
        cmapEl.appendChild(btn)
      }
      fiberOcclusion.oninput()
      nv1.setMeshShader(nv1.meshes[0].id, "specular")
    </script>
  </body>
</html>
